<template>

  <div>

    <div class="chain-link-bar-wrapper">
  		<el-breadcrumb separator-class="el-icon-arrow-right">
	  		<el-breadcrumb-item>系统配置</el-breadcrumb-item>
	  		<el-breadcrumb-item to="/systemConfig/complain">投诉</el-breadcrumb-item>
	  	</el-breadcrumb>
	  </div>

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>投诉列表</span>
      </div>
      <div class="app-diliver-10"></div>
      <div>
        <div class="app-display-inline app-margin-h-20">
          <el-input
                  clearable
                  placeholder="手机号"
                  v-model="page.phone"
                  style="width: 200px;"
          ></el-input>
        </div>
        <div class="app-display-inline app-margin-h-20">
          <el-select v-model="page.type" placeholder="投诉类型" style="width: 200px;">
            <el-option :key="-1" label="全部投诉" :value="-1"/>
            <el-option :key="0" label="活动投诉" :value="0"/>
            <el-option :key="1" label="采购投诉" :value="1"/>
            <el-option :key="2" label="会员投诉" :value="2"/>
            <el-option :key="3" label="项目合作投诉" :value="3"/>
            <el-option :key="4" label="招聘投诉" :value="4"/>
          </el-select>
        </div>
        <div class="app-display-inline app-margin-h-20">
          <el-date-picker
                  v-model="page.startDate"
                  type="date"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  placeholder="开始日期">
          </el-date-picker>
        </div>
        <div class="app-display-inline app-margin-h-20">
          <el-date-picker
                  v-model="page.endDate"
                  type="date"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  placeholder="结束日期">
          </el-date-picker>
        </div>
        <div class="app-display-inline app-margin-h-20">
          <SubmitButton
                  type="primary"
                  plain
                  icon="el-icon-search"
                  :post-option="{
              url: searchUrl,
              data: page,
              callback: searchCB
            }"
          >搜索</SubmitButton>
        </div>
      </div>
      <div class="app-diliver-15"></div>
      <el-table :data="jobList" stripe border style="width: 100%" class="nc-table-btn-ctrl">
        <el-table-column type="index" :index="indexMethod">
        </el-table-column>
        <el-table-column
          label="投诉人"
          width="200">
          <template slot-scope="scope">
            <span>{{scope.row.username}}</span>
            <br>
            <span>{{scope.row.phone}}</span>
          </template>
        </el-table-column>
        <el-table-column label="投诉类型" width="150" prop="complain_type_text"/>
        <el-table-column label="投诉主题" prop="theme"/>
        <el-table-column label="投诉内容" prop="explain"/>
        <el-table-column label="投诉时间" prop="date_time"/>
        <el-table-column label="操作人" prop="operator"/>
        <el-table-column label="操作时间" prop="operator_time"/>
        <el-table-column label="处理说明" prop="handling_opinions"/>
        <el-table-column label="是否已处理">
          <template slot-scope="scope">
            <span class="text-bold color-danger" v-if="scope.row.is_handled === 0">未处理</span>
            <span class="text-bold color-success" v-if="scope.row.is_handled === 1">已处理</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
             <el-button v-if="scope.row.is_handled == 0" type="danger" plain size="mini" @click="checkStatusHandle(scope.row.id)">已处理</el-button>
              <a v-if="scope.row.complain_type === 0" :href="'#/activity/detail/' + scope.row.contentId" target="_blank"><el-button plain size="mini">活动详情</el-button></a>
              <a v-if="scope.row.complain_type === 1" :href="'#/procurement/detail/' + scope.row.contentId" target="_blank"><el-button plain size="mini">采购详情</el-button></a>
              <a v-if="scope.row.complain_type === 2" :href="'#/member/detail/' + scope.row.contentId" target="_blank"><el-button plain size="mini">会员详情</el-button></a>
              <a v-if="scope.row.complain_type === 3" :href="'#/project/detail/' + scope.row.contentId" target="_blank"><el-button plain size="mini">项目详情</el-button></a>
              <a v-if="scope.row.complain_type === 4" :href="'#/job/detail/' + scope.row.contentId" target="_blank"><el-button plain size="mini">招聘详情</el-button></a>
          </template>
        </el-table-column>
      </el-table>
      <div class="pager-bar-wrapper">
        <el-pagination
          background
          layout="prev, pager, next, total"
          :total="page.totalRow"
          :page-size="page.pageSize"
          :current-page="page.pageNum"
          @current-change="pageNumChange"
          @prev-click="pageNumChange"
          @next-click="pageNumChange"
          @size-change="pageSizeChange"
          >
        </el-pagination>
      </div>

    </el-card>

    <ComplainEditDialog :is-show="checkStatusEditVisible" :activityObj="editJob"></ComplainEditDialog>

  </div>

</template>

<script>


  import NcButton from '../common/NcButton'
  import SubmitButton from '../common/SubmitButton'
  import ComplainEditDialog from './ComplainEditDialog'

  import Api from '../../api/Api'
  import JobApi from '../../api/JobApi'

  import JsonKit from '../../kit/JsonKit'

  import { mapGetters } from 'vuex'

	import Store from '../../store/index.js';
  import SystemConfig from "~/api/SystemConfig";

  export default {
  	components: {
  		NcButton, SubmitButton,
        ComplainEditDialog
  	},
  	data(){
  	  return {
  	  	role: 0,
        jobList: [],

        page: {
          checkStatus: '',
          keyWord: '',
          type: -1,
          pageNum: 1,
          pageSize: 10
        },

        checkStatusEditVisible: false,
        checkYes: 0,
        editJob: {},

        searchUrl: SystemConfig.URL_COMPLAIN_LIST,
        markProcessed: SystemConfig.URL_MARK_PROCESSED,
        // endUrl: JobApi.URL_END,
  	  }
  	},
  	computed: {
  	  ...mapGetters(['hasPerm'])
  	},
  	created(){
  	  this.getPage();
		this.role = Store.state.user.role;
      this.$root.eventHub.$on('closeEditDialog', this.hideEditDialog);
  	},
    beforeDestroy: function(){
      this.$root.eventHub.$off('closeEditDialog', this.hideEditDialog);
    },
  	methods: {
      searchCB(json){
        this.jobList = json.list;
        this.setPage(json);
      },
      getPage(){
        SystemConfig.complainList(this.page, json=>{
          this.jobList = json.list;
          this.setPage(json);
        });
      },
      pageNumChange(pageNum){
        this.page.pageNum = pageNum;
        this.getPage();
      },
      pageSizeChange(pageSize){
        this.page.pageSize = pageSize;
        this.getPage();
      },
      setPage(json){
        this.page.pageNum = json.pageNum;
        this.page.pageSize = json.pageSize;
        this.page.totalRow = json.totalRow;
      },
      indexMethod(index){
        return index + 1 + (this.page.pageNum - 1) * this.page.pageSize
      },
      selectTabStatus(checkStatus){
        this.page.checkStatus = checkStatus;
        this.page.pageNum = 1;
        this.getPage();
      },
      checkStatusHandle(id){
        this.editJob = JsonKit.getOf(this.jobList, 'id', id, null);
        this.checkStatusEditVisible = true;
      },
      hideEditDialog(isSuccess){
        this.checkStatusEditVisible = false;
        this.editJob = {};

        if (isSuccess) {
          this.getPage();
        }
      },
  	}
  }

</script>
